Vue.js V-bind at class and style 绑定
在 Vue.js 中，v-bind 指令提供了 :class/style 参数进行处理，并对此针对性的进行了增强表达式类型除了字符串之外，还可以是对象或是数组。
Class 绑定
通常我们可以使用 :class 对象以动态的切换 class，但这个 class 的使用与否取决与属性 isActive 的 Truthy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <style>
.active {
padding: 1.5em;
border: 1px solid #e4e4e4;
}
.err {
border: 1px solid red;
color: red;
padding: 1.5em;
}
</style>
<div id="app">
<p v-bind:class="{active: isActive, err: isError}">{{message}}</p>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
message: 'This is v-bind:class',
isActive: true,
isError: false
}
}
})
const vm = app.mount('#app')
</script>
|
Truthy（真值），在 JavaScript 的定义中，值得是布尔值的上下文转换后的值为 true，除下述意外皆为真值。也就是说当我们在 :class 中使用的是 :class="{active: true}" 才会使用该样式。
| name |
| false |
| 0 |
| “” |
| null |
| undefined |
| Nan |
对于上下文 (context) 是一个任务中不不可少的一组数据，当数据任务中断时，这次之后仍然可以在同一个位置继续执行。
任务可以是进程或线程
数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <style>
.active {
padding: 1.5em;
border: 1px solid #e4e4e4;
}
.err {
border: 1px solid red;
color: red;
padding: 1.5em;
}
</style>
<div id="app">
<p v-bind:class="[headerActive, paddingError]">{{message}}</p>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
message: 'This is v-bind:class',
headerActive: 'active',
paddingError: false
}
}
})
const vm = app.mount('#app')
</script>
|
三元表达式
在下述的例子中，假设 isActive 的 Truthy 为 false，则直接使用 paddingError 作为样式，反之使用 headerActive 作为其 Class，这提供了两种写法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <style>
.active {
padding: 1.5em;
border: 1px solid #e4e4e4;
}
.err {
border: 1px solid red;
color: red;
padding: 1.5em;
}
</style>
<div id="app">
<p v-bind:class="[isActive ? headerActive : '', paddingError]">{{message}}</p>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
message: 'This is v-bind:class',
headerActive: 'active',
paddingError: 'err',
isActive: true
}
}
})
const vm = app.mount('#app')
</script>
|
Style 对象语法
v-bind 的 style 语法非常的类似于 class ，需要注意的是 CSS 属性名可以使用驼峰式(camelCase)或短横线分割(kebab-case)的进行命名：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="app">
<p v-bind:style="{border: borderBold, padding: '1.5em'}">{{message}}</p>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
message: 'This is v-bind:style',
borderBold: '1px solid #e4e4e4'
}
}
})
const vm = app.mount('#app')
</script>
|
数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div id="app">
<p v-bind:style="[borderStyle, paddingStyle]">{{message}}</p>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
message: 'This is v-bind:style',
borderStyle: 'border:1px solid #e4e4e4',
paddingStyle: 'padding:1em'
}
}
})
const vm = app.mount('#app')
</script>
|
